<template>
  <div>
    <PageTitle pageTitle='档案中心' v-if="toPath === 1" />
    <BreadCrumbShow :pageTitle="pageTitle"  v-else />

    <div class="chart-cell" v-if="statisticsData.length > 0">
      <div
        class="num-cell"
        v-for="(statis, index) in statisticsData"
        :key="index + 'statis'"
      >
        <div class="pointer" @click="conditionSearch(statis)">
          <img :src="statis.src" alt="" />
          <div class="cell-right">
            <div class="count">{{ statis.num }}</div>
            <div class="title">{{ statis.title }}</div>
          </div>
        </div>
      </div>
    </div>

    <PendingTips
      v-if="!isClosePending && tempBoxListNum > 0"
      @close="toClosePending"
      :title="'您的临时列表中有'"
      :num="tempBoxListNum"
      @goToTemplist="goToTemplist"
    ></PendingTips>

    <Division
      v-if="
        (!isClosePending && tempBoxListNum > 0) || statisticsData.length > 0
      "
    />

    <div class="search-list">
      <el-form :inline="true" :model="searchForm" class="form-inline" @submit.native.prevent>
        <el-form-item>
          <el-input
            size="medium"
            placeholder="请输入标签或窍编号进行搜索（多个关键字用空格分开）"
            v-model="searchForm.keyword"
            class="input-with-select"
            clearable
            @keyup.enter.native="searchUserBoxList"
          >
            <!-- <i class="el-icon-search" slot="prepend"></i> -->

            <el-button slot="append" type="primary" @click="searchUserBoxList"
              >搜索窍</el-button
            >
          </el-input>
        </el-form-item>
      </el-form>
      <div class="search-right">
        <ExcelButton @outExcel="outExcel" :isExcelLoading='isExcelLoading' />
      </div>
    </div>
    <div class="keyword-search" v-if="keywordList.length > 0">
      <div class="label">已选条件:</div>
      <div class="tag-show">
        <el-tag
          v-for="tag in keywordList"
          :key="tag"
          closable
          @close="closeKeyword(tag)"
          size="medium"
        >
          {{ tag }}
        </el-tag>
      </div>
    </div>

    <div class="apply-operate" v-if="commonFun.judgePower(1020100)">
      <el-button
        :disabled="applyNum == 0"
        type="primary"
        size="small"
        @click="applyRead"
        >申请调阅({{ applyNum }})</el-button
      >
      <el-button size="small" :disabled="applyNum == 0" @click="addApplyList"
        >加入调阅列表({{ applyNum }})</el-button
      >
      <el-button size="small" @click="batchImportApply">批量导入调阅</el-button>
    </div>

    <!-- @contextmenu="showMenu" @rowClick="rowClick" -->
    <ElTable
      refName="applyReadList"
      @select="selectHandle"
      @pageChange="pageChange"
      @selectionChange="selectionChange"
      :type="2"
      :data-source="userBoxList"
      :data-config="tableConfig"
      :total="total"
      :pageSize="pageSize"
      :pageNum="pageNum"
      :isLoading="isLoading"
    >
      <template #boxCodeHeader>
        <div class="header-select">
          <el-select
            v-model="boxCodeHeader"
            placeholder="窍类别"
            size="medium"
            @change="changeSelect"
            clearable
          >
            <el-option
              v-for="item in tableConfig.filter((e) => e.prop == 'boxCode')[0]
                .selectOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </template>

      <template #boxStatusHeader>
        <div class="header-select">
          <div style="line-height: 40px">状态</div>
          <el-select
            v-model="boxStatusHeader"
            placeholder="状态"
            size="medium"
            multiple
            collapse-tags
            @change="changeSelect"
            clearable
            class="multiple-status"
          >
            <el-option
              v-for="item in tableConfig.filter((e) => e.prop == 'boxStatus')[0]
                .selectOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </template>
      <template #rackCodeHeader>
        <div class="header-select">
          <el-select
            v-model="rackCodeHeader"
            placeholder="货位"
            size="medium"
            @change="changeSelect"
            clearable
          >
            <el-option
              v-for="item in tableConfig.filter((e) => e.prop == 'rackCode')[0]
                .selectOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </template>
      <template #bindedOnHeader>
        <div class="header-select">
          <div style="line-height: 40px">绑定时间</div>
          <el-date-picker
            @change="changeSelect"
            v-model="bindedOnHeader"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="mini"
            prefix-icon="el-icon-date"
            :default-time="['00:00:00', '23:59:59']"
          >
          </el-date-picker>
        </div>
      </template>

      <template #boxCode="{ scope }">
        <BoxIconShow :rowInfo="scope.row" />
      </template>

      <template #boxTag="{ scope }">
        <div class="cell-tag">
          <span v-for="(tags, index) in scope.row.boxTagList" :key="index">
            <el-tag
              v-if="index <= 5 && tags.tag.length <= 15"
              class="box-tag mr-5"
              type="info"
              size="small"
              @click="toClickTag(tags)"
            >
              {{ tags.tag }}
            </el-tag>
            <el-tooltip
              class="item"
              effect="light"
              :content="tags.tag"
              placement="top"
            >
              <el-tag
                v-if="index <= 5 && tags.tag.length > 15"
                class="box-tag mr-5"
                type="info"
                size="small"
                @click="toClickTag(tags)"
              >
                {{ tags.tag.substring(0, 15) + "..." }}
              </el-tag>
            </el-tooltip>
          </span>
          <el-tag
            type="info"
            size="small"
            class="box-tag"
            @click="goBoxDetail(scope.row)"
            v-if="scope.row.boxTagList && scope.row.boxTagList.length > 6"
            >......</el-tag
          >
        </div>
      </template>
      <template #rackCode="{ scope }">
        <!-- 只有是档案窍存在云窍箱子中 才会有 云窍号-index  去点击查询 -->
        <span @click="showNext(scope.row)" class="hand statusOrange" v-if="scope.row.boxType == 5 && scope.row.userBoxSubBean && scope.row.userBoxSubBean.mainBoxCode">{{scope.row.userBoxSubBean.mainBoxCode }}-{{ scope.row.userBoxSubBean.index}}</span>
        <span v-else>{{scope.row.rackCode && scope.row.rackCode.code}}</span>
      </template>

      <template #boxStatus="{ scope }">
        <span>{{ commonFun.getLabel(boxStatus, scope.row.boxStatus) }}</span>
      </template>

      <template #orderStatus="{ scope }">
        <span>{{ scope.row.orderStatus && scope.row.orderStatus.info }}</span>
      </template>

      <template #hasPhoto="{ scope }">
        <div class="img-box">
          <img
            v-if="scope.row.hasPhoto == 1"
            @click="goBoxDetail(scope.row)"
            src="@/assets/images/form/img.png"
            alt=""
          />
        </div>
      </template>

      <template #operate="{ scope }">
      <!-- :class="boxCodeList.includes(scope.row.boxCode)?'click-ago': ''"  -->
        <el-button :class="boxCodeList.includes(scope.row.boxCode)?'click-ago': ''" size="mini" @click.native="goBoxDetail(scope.row)"
          >详情</el-button
        >
      </template>

      <template #bottom-btn>
        <el-button
        v-if="commonFun.judgePower(1020100)"
        :disabled="applyNum == 0"
        type="primary"
        size="small"
        @click="applyRead"
        >申请调阅({{ applyNum }})</el-button
      >
      </template>
    </ElTable>

    <!-- 批量导入调阅 -->
    <ImportReadDialog
      title="批量导入调阅"
      :isImportRead="isImportRead"
      @submitImport="submitImport"
      @modeUpload="modeUpload"
      @closeImportDialog="closeDialog"
    />

    <!-- 申请调阅弹框 -->
    <ApplyReadDialog
      :isApplyRead="isApplyRead"
      :userInfo="userInfo"
      :selectedList="selectedList"
      @closeApplyDialog="closeDialog"
      @getList="getUserBoxList"
    />

    <!-- 展示云窍下的档案窍 -->
    <ShowNextBox
      :isShowNextBox.sync="isShowNextBox"
      @closeDialog="closeDialog"
      :showRow="showRow"
      :userBoxList='userBoxList'
    />
  </div>
</template>

<script>
import axios from "axios";
import { mapState } from "vuex";
import PendingTips from "../../components/PendingTips";
import Division from "../../components/Division";
import ElTable from "@/components/table/ElTable.vue";
import ImportReadDialog from "./components/ImportReadDialog";
import ApplyReadDialog from "./components/ApplyReadDialog";
import BoxIconShow from "@/components/public-style/BoxIconShow";
import ExcelButton from "@/components/public-style/ExcelButton";
import PageTitle from "@/components/PageTitle";
import ShowNextBox from "./components/ShowNextBox.vue";
import {
  getUserBoxList,
  getUserBoxListCount,
  getUserBoxStatistics,
  // getTaglistByUserBoxId,
  getTaglistByUserBoxIds,
  toImportTemp,
  toAddTemp,
  getTempBoxListNum,
} from "../../api/access-manage/index";
import { getBoxLastScanTime } from "@/api/inventory/index";

import {
  encryption,
  applySubType,
  clarityType,
  boxStatus
} from "../../utils/dictionary.js";
import Cookies from "js-cookie";

export default {
  name: "applyReadList",
  components: {
    PendingTips,
    Division,
    ElTable,
    ImportReadDialog,
    ApplyReadDialog,
    BoxIconShow,
    ExcelButton,
    PageTitle,
    ShowNextBox
  },
  data() {
    return {
      boxCodeList: [],
      userInfo: {},
      encryption: encryption,
      applySubType: applySubType,
      clarityType: clarityType,
      boxStatus:boxStatus,
      pageTitle: "档案中心",
      userBoxList: [],
      tableConfig: [
        {
          label: "类别 | 编号",
          prop: "boxCode",
          width: "280",
          selectOption: [
            { label: "云窍 ", value: "2" },
            { label: "档案窍 ", value: "5" },
          ],
        },
        {
          prop: "boxTag",
          label: "标签",
          width: "300",
          showTooltip: false,
        },
        {
          prop: "rackCode",
          label: "货位",
          selectOption: [
            { label: "未绑定货位", value: "0" },
            { label: "已绑定货位", value: "1" },
          ],
        },

        {
          prop: "boxStatus",
          label: "状态",
          selectOption: [
            { label: "正常存储", value: "2" },
            { label: "送出库房", value: "3" },
            { label: "客户签收", value: "4" },
            { label: "送回库房", value: "5" },
            { label: "等待回库", value: "6" },
            { label: "等待对接", value: "7" },
            { label: "等待出库", value: "8" },
            { label: "调阅待回库", value: "9" },
            { label: "调阅待入库", value: "10" },
          ],
        },
        {
          prop: "bindedOn",
          label: "绑定时间",
          selectOption: [],
        },
        {
          prop: "inventoryOn",
          label: "最近盘点时间",
        },
        {
          prop: "hasPhoto",
          label: "",
          width: 38,
        },
        {
          prop: "operate",
          label: "操作",
          width: 100,
        },
      ],
      isLoading: false,
      total: 0,
      pageSize: 10,
      pageNum: 1,
      searchForm: {
        keyword: "",
      },
      keywordList: [],
      bindedOnHeader: [],
      rackCodeHeader: '',
      boxStatusHeader: [],
      boxCodeHeader: '',

      isImportRead: false,
      isApplyRead: false,

      isClosePending: false,

      uploadFile: {},
      tempBoxListNum: 0,
      applyNum: 0,
      selectedList: [], // 选中的窍
      statisticsData: [],
      exportData: { type: 0 },
      userId: '',
      toPath: '',
      isExcelLoading: false,
      isShowNextBox: false,
      showRow: {}
    };
  },
  computed: {
    ...mapState({
      // boxCodeList: (state) => state.app.boxCodeList
    }),
  },
  mounted() {
    this.toPath = this.$route.params.toPath
    this.userInfo = JSON.parse(Cookies.get("userInfo"));

    this.userId = this.$route.params.userId ? this.$route.params.userId : localStorage.getItem('mainUserId');
    // boss账号进入时 - 记录当前userId的值
    this.$route.params.userId && localStorage.setItem('mainUserId', this.userId)

    if (this.$route.query.tag) {
      this.keywordList = [this.$route.query.tag];
    }

    this.getUserBoxList();
    this.getUserBoxStatistics();
    // this.getTempBoxNum();
    this.boxCodeList = []
  },
  methods: {
    // 点击档案窍的云窍窍号，展示它下级所有的档案窍
    showNext(row) {
      console.log(row, this.userBoxList, 'rowrowrowrowrowrow')
      this.showRow = row
      // 打开弹窗展示
      this.isShowNextBox = true
    },
    // 搜索窍
    searchUserBoxList() {
      this.pageNum = 1
      this.getUserBoxList();
    },
    // 导出窍列表
    outExcel() {
      this.isExcelLoading = true
      axios({
        headers: {
          Authorization: JSON.parse(Cookies.get("userInfo")).token,
        },
        url: "/api/business/userBox/export",
        method: "post",
        responseType: "blob", // 后台响应数据类型
        data: this.exportData,
      }).then((response) => {
        this.isExcelLoading = false
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement("a");
        let fname =
          "窍列表_" + this.$moment(new Date()).format("YYYY-MM-DD") + ".xlsx";
        link.href = url;
        link.setAttribute("download", fname);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      });
    },
    // 点击标签 去搜索
    toClickTag(tags) {
      // 将tag 添加到 keywordList
      this.keywordList.push(tags.tag);
      this.keywordList = [...new Set(this.keywordList)];

      this.pageNum = 1
      this.getUserBoxList();
    },
    // 获得临时窍 列表数目
    getTempBoxNum() {
      this.isClosePending = false;
      new Promise((resolve) => {
        getTempBoxListNum(0).then((res) => {
          this.tempBoxListNum = res.data;
        });
      });
    },
    // 分页数据变动
    pageChange(emitData) {
      this.pageNum = emitData.pageNum;
      this.pageSize = emitData.pageSize;
      this.getUserBoxList();
    },
    // 选择项变化
    selectionChange(selectArr) {
      this.applyNum = selectArr.length;
      this.selectedList = selectArr;
    },
    // 获得统计数据
    getUserBoxStatistics() {
      // 如果没有管理员的角色， 不请求统计数据
      if (this.userInfo.roleList.filter((e) => e.id == 1).length === 0) {
        return;
      }

      // const userId = this.userInfo.userId;
      getUserBoxStatistics({ userId: this.userId })
        .then((res) => {
          this.statisticsData = [
            {
              itemIndex: 1,
              title: "存窍数量",
              icon: "fa fa-cubes",
              num: res.data.allBoxCount,
              path: "",
              src: require("../../assets/images/header/state-one.png"),
            },
            {
              itemIndex: 2,
              title: "在库数量",
              icon: "fa fa-folder",
              num: res.data.inBoxCount,
              path: "",
              src: require("../../assets/images/header/state-two.png"),
            },
            {
              itemIndex: 3,
              title: "空窍数量",
              icon: "fa fa-folder-open",
              num: res.data.emptyBoxCount,
              path: "",
              src: require("../../assets/images/header/state-three.png"),
            },
            {
              itemIndex: 4,
              title: "今日入库",
              icon: "fa fa-cloud-download",
              num: res.data.intoCount || 0,
              path: "",
              src: require("../../assets/images/header/state-four.png"),
            },
            {
              itemIndex: 5,
              title: "今日出库",
              icon: "fa fa-cloud-upload",
              num: res.data.outCount || 0,
              path: "",
              src: require("../../assets/images/header/state-five.png"),
            },
          ];
        })
        .catch((err) => {
          this.statisticsData = [];
        });
    },
    // 点击进行条件搜索
    conditionSearch(statics) {
      if (
        statics.itemIndex == 1 ||
        statics.itemIndex == 2 ||
        statics.itemIndex == 3
      ) {
        this.rackCodeHeader = null;
        this.keywordList = [];

        if (statics.itemIndex == 1) {
          this.boxStatusHeader = ["6", "5", "2", "8", "3", "4"];
        } else if (statics.itemIndex == 2) {
          this.boxStatusHeader = ["2", "8"];
        } else if (statics.itemIndex == 3) {
          this.boxStatusHeader = ["7"];
        }
        this.pageNum = 1
        this.getUserBoxList();
      } else if (statics.itemIndex == 4 || statics.itemIndex == 5) {
        // 跳转相应页面, 并传参
        this.$router.push({
          name: "WarehousingRecord",
          params: { type: statics.itemIndex, userId: this.userId},
        });
      }
    },
    // 头部筛选项变化
    changeSelect() {
      this.pageNum = 1
      this.getUserBoxList();
    },
    // 将keyword 添加到keywordList中 , 清空 searchForm
    addKeyword() {
      if (this.searchForm.keyword && this.searchForm.keyword != "") {
        const tagList = this.searchForm.keyword
          .split(" ")
          .filter((e) => e !== "");

        this.keywordList = [...new Set(this.keywordList.concat(tagList))];
        this.searchForm.keyword = "";
      }
    },
    // 删除 已有的keyword
    closeKeyword(tag) {
      this.keywordList.splice(this.keywordList.indexOf(tag), 1);
      this.pageNum = 1
      this.getUserBoxList();
    },
    // 获得用户窍列表
    getUserBoxList() {
      this.getTempBoxNum(); // 临时窍展示
      this.addKeyword();
      // type 0调阅 1回库 2销毁 3永久下架
      const data = {
        subFlag: 0, // 0 返回 档案窍及云窍   1  返回 容器窍
        type: 0,
        userId: this.userId,
        keywordList: this.keywordList, // 多个关键字
        boxStatusList: this.boxStatusHeader,
        boxType: this.boxCodeHeader ? this.boxCodeHeader : null,
        isBindRack: this.rackCodeHeader && this.rackCodeHeader,
        startBindTime:
          this.bindedOnHeader &&
          parseInt(new Date(this.bindedOnHeader[0]).getTime() / 1000),
        endBindTime:
          this.bindedOnHeader &&
          parseInt(new Date(this.bindedOnHeader[1]).getTime() / 1000),
      };
      this.exportData = data;

      const params = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
      };
      this.isLoading = true;
      this.userBoxList = [];

      getUserBoxListCount(data, params).then(res => {
        this.total = res.data;
      })

      new Promise((resolve) => {
        getUserBoxList(data, params)
          .then((res) => {
            res.data.map((e) => {
              e.bindedOn = this.$moment(e.bindedOn * 1000).format(
                "YYYY-MM-DD HH:mm:ss"
              );
              e.updatedOn = this.$moment(e.updatedOn * 1000).format(
                "YYYY-MM-DD HH:mm:ss"
              );
            });
            this.userBoxList = res.data;
            // this.total = res.total;

            if (this.userBoxList.length > 0) {
              let ids = [];
              this.userBoxList.map((item) => {
                ids.push(item.userBoxId);
              });

              getTaglistByUserBoxIds(ids).then((res) => {
                this.userBoxList.map((item) => {
                  res.data.map((tags) => {
                    if (tags.userBoxId == item.userBoxId) {
                      item["boxTagList"] = tags.tagList.filter(m => m.tag != ';' && m.tag != '；');
                      this.$forceUpdate();
                    }
                  });
                });
              });

              // 查窍的最近一次盘点时间
              getBoxLastScanTime(ids).then((res) => {
                this.userBoxList.map((item) => {
                  if (res.data[item.userBoxId]) {
                    item["inventoryOn"] = this.$moment(
                      res.data[item.userBoxId] * 1000
                    ).format("YYYY-MM-DD HH:mm:ss");
                  }
                  this.$forceUpdate();
                });
              });
            }

            this.isLoading = false;
          })
          .catch((err) => {
            this.isLoading = false;
          });
      });
    },
    // 点击多选框 选中
    selectHandle(a) {},

    // 关闭临时列表 提示
    toClosePending(data) {
      this.isClosePending = data;
    },
    // 去 窍详情
    goBoxDetail(row) {
      // 点击后按钮颜色变更 - 点击过后窍号加入一个集合，在集合中的窍颜色显示为已点击
      // this.$store.dispatch('app/setNewList', row.boxCode)
      this.boxCodeList.push(row.boxCode)

      // this.$router.push({
      //   name: "BoxDetail",
      //   params: {
      //     id: row.userBoxId,
      //   },
      // });
      let routeUrl = this.$router.resolve({
        name: "BoxDetail",
        params: { id: row.userBoxId },
      });
      window.open(routeUrl.href, "_blank");
    },
    // 加入调阅列表
    addApplyList() {
      let userBoxIdList = [];
      this.selectedList.map((e) => {
        userBoxIdList.push(e.userBoxId);
      });

      new Promise((resolve) => {
        // 0调阅 1回库 2销毁 3永久下架
        toAddTemp(userBoxIdList, { type: 0 }).then((res) => {
          if (res.data.existsTempList) {
            this.$message({
              type: "warning",
              message: ` ${res.data.existsTempList.length>3 ? res.data.existsTempList.splice(0,3).toString() + '等': res.data.existsTempList.toString()}已加入临时列表，无需重复添加`,
            });
          } else {
            this.$message({
              type: "success",
              message: "加入调阅列表成功",
            });
          }

          this.getTempBoxNum();
        });
      });
    },
    // 出现 导入调阅弹窗
    batchImportApply() {
      this.isImportRead = true;
    },
    // 申请调阅
    applyRead() {
      this.isApplyRead = true;
    },

    // 关闭 弹框
    closeDialog() {
      this.isApplyRead = false;
      this.isImportRead = false;
      this.isShowNextBox = false
    },
    // 上传文件
    modeUpload(param) {
      // this.$refs.uploadButton.clearFiles();
      this.uploadFile = param;
    },
    // 批量导入调阅 - 确认
    submitImport() {
      if (!this.uploadFile.file) {
        this.$message({
          type: "error",
          message: "请选择文件后上传",
        });
        return;
      }
      
      let formData = new FormData();
      formData.append("file", this.uploadFile.file);
      // this.$refs.uploadButton.submit();
      // this.$refs.uploadButton.clearFiles();
      toImportTemp(formData, { type: 0 })
        .then((res) => {
          if (res.code == 200) {
            this.commonFun.getTempReturnInfo(res.data, this)

            this.isImportRead = false;
            this.getUserBoxList();
            // 跳转至临时列表
            this.$router.push({
              path: "/retrieval/temp",
            });
          }
        })
        .catch((err) => {
          this.isLoading = false;
        });
    },
    // 去临时列表
    goToTemplist() {
      this.$router.push({
        name: "AccessTempList",
        params: { type: 0 },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box-code {
  display: flex;
  align-items: center;
  .el-image-box {
    height: 60px;
    width: 80px;
    margin-right: 10px;
    text-align: center;
    .el-image {
      height: 100%;
    }
  }

  .title {
    color: #333;
    font-size: 12px;
    font-weight: 550;
  }
}
.img-box {
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    width: 70%;
  }
}
</style>

<style lang="scss" scoped>
.search-list {
  // margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  ::v-deep .el-form {
    flex: 1;
  }
  .form-inline {
    ::v-deep .el-form-item {
      margin-bottom: 0;
      width: 100%;
    }
    ::v-deep  .el-form-item__content {
      width: 40%;
    }

    ::v-deep  .el-input-group__append {
      color: #fff;
      background-color: #f88123;
    }
  }

}
.keyword-search {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  .label {
    min-width: 50px;
    margin-right: 10px;
    font-size: 10px;
    margin-top: 3px;
  }
  .tag-show {
    flex-wrap: wrap;
    ::v-deep  .el-tag {
      margin: 5px 10px 5px 0;
    }
  }
}

.apply-read-dialog {
  .dialog-title {
    color: #f88123;
    font-size: 16px;
  }
  .more-box-show {
    background: #eee;
    color: #f88123;
    padding-left: 10px;
  }
  .show-more {
    cursor: pointer;
  }
}
.page {
  margin-bottom: 30px;
}
.apply-operate {
  margin-top: 10px;
  margin-bottom: 15px;
}
// 数量展示
.chart-cell {
  display: flex;
  padding: 20px 0;
  justify-content: space-between;
  height: 150px;
  box-sizing: border-box;
  .num-cell {
    width: 18.4%;
    // margin-bottom: 30px;
    // margin-right: 2%;
    color: #666;
    background-color: #f3f4f6;
    border-radius: 4px;
    // border: #f6f4f2 1px solid;
    .pointer {
      min-height: 115px;
      min-width: 160px;
      padding: 20px;
      display: flex;
      // justify-content: center;
      align-items: center;
      img {
        // display: block;
        // height: 54px;
        // font-size: 60px;
        // line-height: 70px;
        // float: left;
        // text-align: center;
        margin: 0 25px 0 20px;
        // color: rgba(235, 84, 5, 0.5);
      }
      .title {
        font-size: 14px;
        text-transform: uppercase;
        font-weight: 400;
        line-height: 26px;
      }
      .count {
        font-size: 34px;
        font-weight: 700;
        line-height: 40px;
        color: #333;
      }
    }
  }
  .num-cell:last-child {
    margin-right: 0;
  }
}

// 列表中的tag
.cell-tag {
  .box-tag {
    margin-bottom: 5px;
    cursor: pointer;

    .box-tag-span {
      width: 40px;
      overflow: hidden;
    }
  }
}
</style>
<style lang="scss">
.el-select {
  ::v-deep .el-select__tags {
    // 解决多个tag卡片溢出隐藏问题
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;

    .el-tag {
      // 注意这个inline-block 对卡片溢出隐藏很重要
      display: inline-block;

      // 解决单个tag文字过长溢出隐藏问题
      .el-select__tags-text {
        display: inline-block;
        max-width: 70px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .el-icon-close {
        top: -6px;
        right: -4px;
      }
    }
  }
}

.el-input-group__prepend {
  background-color: transparent;
}

.header-select {
  .multiple-status {
    .el-input__inner {
      width: 8px;
    }
    .el-select__tags {
      display: none;
    }
  }
}
.click-ago {
  background: rgba(255, 139, 49, 0.2);
}
</style>
